<template>
  <div class="myBpmInstList">
    <div class="myBpmInstList-top"><my-icon class="myBpmInstList-top-i" type="iconVue3jpaas-icon_shenpilishi"></my-icon><span class="myBpmInstList-top-name">{{ i18n("initiation","我的发起") }}</span><div @click="skipList" class="myBpmInstList-top-more">{{ i18n("more","查看更多") }}<my-icon type="iconjiantou_liebiaoxiangyou"></my-icon></div></div>
    <div style="padding: 20px" class="myBpmInstList-list">
      <div class="myBpmInstList-common" @click="handleTask(item)" v-for="(item,index) in initializeData" :key="index">
        <div class="myBpmInstList-common-le"><div class="myBpmInstList-common-myicon"><my-icon type="iconVue3jpaas-icon_liucheng"></my-icon></div></div>
        <div class="myBpmInstList-common-ri" :title="item.subject">
          <div class="myBpmInstList-common-name">{{item.subject}}</div>
          <div class="myBpmInstList-common-time"><span style="font-size: 12px" :style="{color:statusMap[item.status]?statusMap[item.status].color:''}">{{ statusMap[item.status].text }}</span><span style="color: #dedbdb;margin:0px 5px ">|</span>{{item.createTime}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FlowUtil from "@/views/modules/bpm/js/FlowUtil";
import {myBpmApi} from "@/views/modules/column/myBpmInstList/myBpmInstList";
import MyBpmInstList from "@/views/modules/bpm/ws/MyBpmInstList/MyBpmInstList.vue";
import {Util} from "@lowcode/jpaas-base-lib";
/*import {
    mapState,
    mapMutations
} from 'vuex';*/
export default {
    name: "myBpmInstList",
    mixins:[FlowUtil],
    inject:["broadCastChannel"],
    data(){
        return{
            initializeData:[],
            statusMap: {
                DRAFTED: { color: 'gray', text: this.statusI18n('statusMap.draft','草稿') },
                LOCKED: { color: 'black', text: this.statusI18n('statusMap.lock','锁定') },
                INVOKE_TO_STARTOR: { color: 'red', text: this.statusI18n('statusMap.withdrawToStartor','撤回(发起人)') },
                RUNNING: { color: 'red', text: this.statusI18n('statusMap.running','运行中') }, //运行
                SUPSPEND: { color: 'black', text: this.statusI18n('statusMap.suspend','暂停') }, //运行
                CANCEL: { color: 'red', text: this.statusI18n('statusMap.cancel','作废') }, //作废
                SUCCESS_END: { color: 'green', text: this.statusI18n('statusMap.success','成功') }, // 成功结束
                ERROR_END: { color: 'red', text: this.statusI18n('statusMap.abort','异常结束') }, //异常结束
            },
        }
    },
    computed:{
        /*...mapState({
            navigation: state => state.appSetting.navigation,
            frontType: state => state.appSetting.frontType
        }),*/
        tabNavs(){
            return this.navigation[this.frontType];
        }
    },
    created(){
        this.init()
        this.broadCastChannel.onmessage = (event) => {
            if(event.data.type=='refreshTask'){
                this.init();
            }
        };
    },
    methods:{
        i18n(name, text, key) {
            return this.$ti18(name, text, "ProcessPortal", key);
        },
        statusI18n(name,text,key){
            return this.$ti18(name,text,"MyBpmInst",key);
        },
        init(){
            let parameter = {
                pageNo:1,
                pageSize:5,
                sortOrder:"asc"
            }
            myBpmApi.myBpmInsts(parameter).then(res=>{
                this.initializeData = res.result.data
            })
        },
        skipList(){
            var conf = {
                component: MyBpmInstList,
                curVm: this,
                max: true,
                title: this.i18n('initiation',"我的发起"),
            };
            Util.open(conf);
        },
        handleTask(record) {
            this.openDetail(record.appId,record.instId,"mystart");
        },
    }
}
</script>

<style scoped>
.myBpmInstList-common-ri:hover .myBpmInstList-common-name,.myBpmInstList-common-ri:hover .myBpmInstList-common-time{
    color:  #4285f4;
}
.myBpmInstList-list{
    padding:20px;
    width: 100%;
}
.myBpmInstList-top{
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e8e8e8;
    padding: 0px 20px;
    display: flex;
    align-items: center;
}
.myBpmInstList-top-i{
    color: #4285f4;
    margin-right: 10px;
    font-size: 25px;
}
.myBpmInstList-top-name{
    font-size: 16px;
    color: #010101;
    font-weight: bold;
    flex: 1;
}
.myBpmInstList-top-more{
    color: #4285f4;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.myBpmInstList-top-more i{
    color: #4285f4;
    font-size: 25px;
    width: 10px;
}
.myBpmInstList-common{
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 20px;
    cursor: pointer;
}
.myBpmInstList-common-le{
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: rgb(8,235,70,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.myBpmInstList-common-myicon{
    width: 23px;
    height: 23px;
    background-color: #5bce6f;
    display: flex;
    align-items: center;
    justify-content: center;
}
.myBpmInstList-common-myicon i {
    font-size: 20px;
    color: white;
}
.myBpmInstList-common-ri{
    flex: 1;
    overflow: hidden;
    margin-left: 16px;
}
.myBpmInstList-common-name{
    font-size: 14px;
    color: #000000;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.myBpmInstList-common-time{
    font-size: 13px;
    color: rgb(0,0,0,0.65);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>
